<template>
    <div class="app-container" style="height: 100%;" v-loading="loading" element-loading-text="加载中...">
      <div class="inf_basic">
        <div class="title_h4">
          <h4 class="title_inf">商家基本信息</h4>
        </div>
        <el-form ref="enterpriseDataRef" :rules="enterpriseDataRule" label-position="top" :model="enterpriseData"
          label-width="100px" class="demo-ruleForm">
          <el-form-item label="商家全称" prop="name">
            <el-input v-model="enterpriseData.name" placeholder="请输入商家名称" clearable :disabled="!edit" />
          </el-form-item>
          <el-form-item label="负责人名称" prop="username">
            <el-input v-model="enterpriseData.username" placeholder="请输入负责人名称" clearable :disabled="!edit" />
          </el-form-item>
          <el-form-item prop="phone" class="el-item" label="手机号">
            <el-input placeholder="手机号" maxlength="11" type="tel" :disabled="!edit" autoComplete="on"
              v-model="enterpriseData.phone" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="商家代码">
            <div class="input_show">
              <el-input v-model="enterpriseData.code" disabled />
            </div>
          </el-form-item>
          <el-form-item prop="telephone" class="el-item" label="商家电话">
            <el-input placeholder="商家电话" type="tel" autoComplete="on" :disabled="!edit" v-model="enterpriseData.telephone"
              clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="商家地址">
            <SingleAddress ref="addrsDom" :address="enterpriseData.addr" :disabled="!edit" />
          </el-form-item>
          <el-form-item label="商家详细地址">
            <el-input v-model="enterpriseData.address" maxlength="200" :disabled="!edit" />
          </el-form-item>
        </el-form>
        <div class="btn_xiugai">
          <el-button class="btn_alter" color="#007cff" @click="onEdit" v-if="!edit">修改</el-button>
          <el-button class="btn_alter" color="#ccc" @click="edit = false" v-if="edit">取消</el-button>
          <el-button class="btn_alter" :loading="submitLoading" color="#00c0c0" @click="onSave(enterpriseDataRef),submitLoading=true" v-if="edit">保存修改</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import { ElMessage } from 'element-plus'
  import * as  _ from 'lodash'
  import SingleAddress from '../../../components/address/singleAddress.vue'
  import { getCustomerInfo, updateCustomer } from '../../../api/system'
  import { Getdrsss, phone } from '../../../utils/validate'
  const loading = ref(false)
  const addrsDom = ref()
  const edit = ref(false) // 是否修改
  const enterpriseDataRef = ref<FormInstance>()
  const enterpriseData = ref({
    name: '', // 商家全称
    username: '',
    code: '', // 商家代码
    phone: '',
    telephone: '',
    addr: { // 地址
      province: '',
      city: '',
      area: '',
      town: ''
    },
    address: '' // 详细地址
  })
  
  const enterpriseDataRule = ref({
    name: [
      { required: true, message: '商家名称不能为空', trigger: ['change', 'blur'] }
    ],
    username: [
      { required: true, message: '负责人名称不能为空', trigger: ['change', 'blur'] }
    ],
    phone: [
      { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
      { validator: phone(enterpriseData.value.phone), trigger: ['blur', 'change'] },
    ],
    telephone: [
      { required: false, message: '请填商家电话', trigger: ['blur', 'change'] },
      { pattern: /^\d{3,4}-?\d{7,8}$|^1[3,4,5,6,7,8,9]\d{9}$/, message: '电话号码格式不正确', trigger: ['blur', 'change'] },
    ],
  })
  
  // 修改
  const onEdit = () => {
    edit.value = true
  }
  
  // 保存修改
  const submitLoading=ref(false)
  const onSave = _.debounce(async (formEl: any) => {
    await formEl.validate((valid, fields) => {
      if (valid) {
        updateCustomerApi()
      }
    })
  },500)
  
  // 清空对象数据
  const clearEnterpriseData = () => {
    enterpriseData.value = {
      name: '', // 商家全称
      username: '',
      phone: '',
      code: '', // 商家代码
      telephone: '',
      addr: {
        province: '',
        city: '',
        area: '',
        town: ''
      },
      address: ''
    }
  }
  
  // 更新商家信息Api
  const updateCustomerApi = () => {
    const addr = addrsDom.value.getSelectAddr()
    const data = {
      name: enterpriseData.value.name,
      phone: enterpriseData.value.phone,
      username: enterpriseData.value.username,
      telephone: enterpriseData.value.telephone,
      province: addr.province,
      city: addr.city,
      area: addr.area,
      town: addr.town,
      address: enterpriseData.value.address
    }
    updateCustomer(data).then(res => {
      ElMessage({
        type: res.data.success ? 'success' : 'error',
        message: res.data.message
      })
      if (res.data.success) {
        edit.value = false
        submitLoading.value=false
        requestCustomerApi()
      }
    })
  }
  
  // 获取商家信息Api
  const requestCustomerApi = async () => {
    clearEnterpriseData()
    loading.value = true
    await getCustomerInfo().then((res) => {
      loading.value = false
      if (res.data.success) {
        const data = res.data.data.row
        enterpriseData.value = {
          name: data.name, // 商家名称
          phone: data.phone,
          code: data.code, // 商家代码
          username: data.username,
          telephone: data.telephone,
          addr: {
            province: data.province,
            city: data.city,
            area: data.area,
            town: data.town
          },
          address: data.address
        }
      }
    })
  }
  // 获取商家信息
  onMounted(async () => {
    requestCustomerApi()
  })
  
  </script>
  <style lang="scss" scoped>
  @import './index.scss';
  </style>
  